<template>
	<div>vue3自定义指令</div>
	<div>input自动获取焦点</div>
	<input v-focus />
	<!-- iphonex/全面屏底部安全区适配 -->
	<div>iphonex/全面屏底部安全区适配</div>
	<div class="safeDiv" v-safe-area-bottom="'10px'">213</div>
	<div class="safeDiv" v-safe-area-bottom>213</div>
	<div class="">111</div>
	<!-- 弹窗背景页不滚动 -->
	<button @click="openDialog">打开弹窗</button>
	<div v-if="isOpen" v-touch-scroll>
		<div class="dialogDiv" @click="closeDialog">是的，我是一个弹窗，当我出现时我的背景会吓得不敢动		<div>123</div></div>

	</div>
	<button @click="openDialog2">打开弹窗2-移动端有效</button>
	<div v-if="isOpen2" id="isOpen2">
		<div class="dialogDiv" ref="dialogDiv" @click="closeDialog2">是的，我是一个弹窗2，当我出现时我的背景会吓得不敢动</div>
	</div>

	<div class="longDiv">222</div>
	<button @click="openDialog">打开弹窗</button>
	<!-- 实现一个copy工具 -->
	<div>实现一个copy工具</div>
	<div>简单使用-无效</div>
	<!-- <button v-clipboard="'copy copy Text'">点击直接复制到剪贴板</button> -->
	<div>带回调的使用-无效</div>
	<!-- <button v-clipboard="text" v-clipboard:success="success" v-clipboard:error="error">copy copy Text</button> -->
	<div>复制input里面的内容</div>
	<button class="copyBtn" type="primary" v-copy="'copyText1'">copy</button>
	<div>12</div>
	<input v-model="copyText2" />
	<p>copyText2:{{copyText2}}</p>
	<button class="copyBtn" type="primary" v-copy="copyText2">copy</button>
	<div>模拟</div>
	<div @click="showToggle">模拟v-myshow</div>
	<input type="text" v-myshow="show" />

	<div>模拟v-mymodel</div>
	<input type="text" v-mymodel="content" />{{ content }}
	<!-- <div class="vDrag" v-drag>v-drag</div> -->
	
	<div class="vDrag" v-expand-click  @click="glabClickoutside">v-drag</div>
</template>

<script>
	import {
		ref,
		nextTick
	} from 'vue'
	export default {
		name: 'HelloWorld',
		props: {
			msg: String,
		},
		setup: () => {
			const count1 = ref(3)
			const dialogDiv = ref(null)
			return {
				count1,
				dialogDiv
			}
		},
		data() {
			return {
				count: 0,
				isOpen: false,
				isOpen2: false,
				message: 'Runoob!',
				type: "C",
				text: 123,
				show: true,
				copyText2: '123',
				content: "法医",
			}
		},
		directives: {
			focus: {
				mounted(el) {
					el.focus()
					console.log('mounted')
				},
			},
			safeAreaBottom: {
				beforeMount(el, binding) {
					const addHigh = binding.value || 0
					el.setAttribute('style', el.style.cssText +
						`padding-bottom: calc(${addHigh} +  constant(safe-area-inset-bottom));padding-bottom: calc(${addHigh} +  env(safe-area-inset-bottom));`
					);
				}
			},
			touchScroll: {
				mounted() {
					const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
					//思路：通过设置body浮动到当前位置高度
					document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;';
				},
				unmounted() {
					const body = document.body || document.documentElement;
					body.style.position = '';
					const top = body.style.top;
					console.log('top=',top)
					document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top, 10);
					body.style.top = '';
				}
			},
			clipboard: {
				beforeMount(el, binding, vnode) {
					console.log('beforeMount', vnode)
					const _this = context
					// 利用arg用来注入回调函数
					if (binding.arg === 'success') {
						_this.__clipboardSuccess = _this[binding.expression]
					} else if (binding.arg === 'error') {
						_this.__clipboardError = _this[binding.expression]
					} else { // 正常情况下就将文字缓存起来

						_this.__clipboardValue = binding.value
					}
					el.handler = () => {
						if (!_this.__clipboardValue) {
							this.__clipboardError && this.__clipboardError('无内容')
							return
						}
						if (binding.arg) { // 这里是因为属性被我们用了多次会多次执行，所以限制了执行次数
							return
						}
						try {
							const textarea = document.createElement('textarea')
							textarea.readOnly = 'readonly' // 禁止输入， readonly 防止手机端错误聚焦自动唤起键盘
							textarea.setAttribute('style',
								'position:fixed;top:-9999px;left:-9999px;') // 它是可见的，但它又是不可见的
							textarea.value = binding.value
							document.body.appendChild(textarea)
							textarea.select()
							const result = document.execCommand('Copy')
							if (result) {
								_this.__clipboardSuccess && _this.__clipboardSuccess(binding.value) // 这里可以定义成功回调返回的数据
							}
							document.body.removeChild(textarea)
						} catch (e) {
							this.__clipboardError && this.__clipboardError(e)
						}
					}
					el.addEventListener('click', el.handler)
				},
				componentUpdated(el, {
					arg,
					value
				}, {
					context
				}) { // 更新值时候触发
					const _this = context
					if (!arg) { // 注册回调的部分不要赋值
						// _this.__clipboardValue = value
					}
				},
				unmounted(el) {
					el.removeEventListener('click', el.handler)
				},
			},

			copy: {
				beforeMount(el, binding) {
					console.log('beforeMount', binding)
					var value = binding.value
					// 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到
					el.$value = value;
					el.handel = () => {
						// 值为空的时候，给出提示
						if (!el.$value) {
							console.warn("无复制内容");
							return;
						}
						// 动态创建 textarea 标签
						const textarea = document.createElement("textarea");
						// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
						textarea.readOnly = "readonly";
						textarea.style.position = "absolute";
						textarea.style.left = "-99999x";
						// 将要 copy 的值赋给 textarea 标签的 value 属性
						textarea.value = el.$value;
						// 将 textarea 插入到 body 中
						document.body.appendChild(textarea);
						// 选中值并复制
						textarea.select();
						textarea.setSelectionRange(0, textarea.value.length);
						const result = document.execCommand("Copy");
						if (result) {
							console.warn("复制成功");
						}
						document.body.removeChild(textarea);
					};
					// 绑定点击事件，就是所谓的一键 copy 啦
					el.addEventListener("click", el.handel);
				},
				//重点：在元素自身更新前触发
				beforeUpdate(el, {
					value
				}) {
					console.log('beforeUpdate', value)
					el.$value = value;
				},
				componentUpdated(el, {
					value
				}) {
					console.log('componentUpdated', value)
					el.$value = value;
				},
				// 指令与元素解绑的时候，移除事件绑定
				unmounted(el) {
					el.removeEventListener("click", el.handel);
				}
			},

			myshow: {
				beforeMount(el, binding) {
					const {
						value
					} = binding
					console.log('bind')
					const display = value ? "" : "none"
					el.style.display = display
				},
				componentUpdated(el, binding) {
					const {
						value
					} = binding
					console.log('componentUpdated')
					const display = value ? "" : "none"
					el.style.display = display
				},
			},

			//模拟v-model,目前无效果
			mymodel: {
				beforeMount(el, binding, vnode) {
					const vm = vnode.context;
					const {
						value,
						expression
					} = binding;
					el.value = binding.value
					// el.oninput = function() {
					// 	console.log('el.value', el.value)
					// 	const inputValue = el.value;
					// 	vm[expression] = el.value;
					// }
					el.oninput = e => {
						var value = e.target.value;
						console.log('value', value)
						vnode.context[binding.expression] = value;
					}

				},
				componentUpdated(el, binding) {
					// const {
					// 	value
					// } = binding;
					// el.value = value
				}
			},

			//拖拽功能,目前无效果
			drag: {
				beforeMount(el, binding, vnode) {
					let _el = el
					document.onselectstart = function() {
						return false //禁止选择网页上的文字
					}

					_el.onmousedown = e => {
						let disX = e.clientX - _el.offsetLeft //鼠标按下，计算当前元素距离可视区的距离
						let disY = e.clientY - _el.offsetTop
						document.onmousemove = function(e) {
							let l = e.clientX - disX
							let t = e.clientY - disY;
							_el.style.left = l + "px"
							_el.style.top = t + "px"
						}
						document.onmouseup = e => {
							document.onmousemove = document.onmouseup = null
						}
						return false
					}
				}
			},

			//扩大点击效果,目前无效果，document.styleSheets.length=0
			expandClick: {
				beforeMount(el, binding, vnode) {
					const s = document.styleSheets[document.styleSheets.length - 1]
					const DEFAULT = -10 // 默认向外扩展10px
					const [top, right, bottom, left] = binding.expression && binding.expression.split(',') || []
					const ruleStr =
						`content:"";position:absolute;top:-${top || DEFAULT}px;bottom:-${bottom || DEFAULT}px;right:-${right || DEFAULT}px;left:-${left || DEFAULT}px;`

					const classNameList = el.className.split(' ')
					el.className = classNameList.includes('expand_click_range') ? classNameList.join(' ') : [...
						classNameList, 'expand_click_range'
					].join(' ')
					el.style.position = el.style.position || "relative"
					console.log('s=',s,document,document.styleSheets,document.styleSheets.length)
					if (s && s.insertRule) {
						// s.insertRule('.expand_click_range::before' + '{' + ruleStr + '}', s.cssRules.length)
					} else {
						/* IE */
						// s.addRule('.expand_click_range::before', ruleStr, -1)
					}
				},
			},

		},
		watch: {
			// watch进行监听input3值的变化
			input3(newval, oldval) {
				console.log('watch监听-input3-newval=', newval)
			}
		},
		created() {
			//this.count==this.$data.count true
			console.log('this.count')
		},
		methods: {
			reverseMessage() {
				this.message = this.message.split('').reverse().join('')
			},
			openDialog() {
				this.isOpen = true;
			},
			closeDialog() {
				this.isOpen = false;
			},
			//移动端的弹窗滚动穿透解决办法2
			openDialog2() {
				this.isOpen2 = true;
				var isOpen2 = document.getElementById('isOpen2');
				console.log('isOpen2', this.dialogDiv, document, isOpen2)

				//动态获取dom:先nextTick() 后再获取，不然获取不到dom
				nextTick(() => {
					console.log('nextTick', this.dialogDiv)
					// 为元素添加事件监听touchmove，阻止穿透
					this.dialogDiv.addEventListener('touchmove', function(e) {
						e.preventDefault()
					}, {
						passive: false //  禁止 passive 效果
					});
				})

			},
			success(e) {
				console.log(e); // 复制成功回调
			},
			error(e) {
				console.log(e); // 复制失败回调
			},
			glabClickoutside(){
				console.log('glabClickoutside');
			},
			closeDialog2() {
				this.isOpen2 = false;
			},
			showToggle(){
				console.log('showToggle')
				this.show=!this.show
				console.log('this.show=',this.show)
			}
		},
	}
</script>

<style scoped="scoped">
	.title {
		padding-top: 10px;
		font-weight: bold;
		border-bottom: 1px solid #666;
	}

	.safeDiv {
		outline: 1px solid #2C3E50;
	}

	.longDiv {
		height: 1000px;
		width: 300px;
		background: #ccc;
	}

	.dialogDiv {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0px;
		background: #999;
		opacity: 0.6;
		z-index: 999;
	}

	.vDrag {
		position: fixed;
		left: 0px;
		top: 20px;
		outline: 1px solid #0000FF;
		z-index: 999;
	}
</style>
